<template>
  <el-row>
      <el-col :span="24">
          <el-card>
              <el-form :inline="true" class="demo-form-inline">
              </el-form>
              <el-scrollbar height="530px">
                  <el-table :data="tasklist" border style="width: 100%">
                      <el-table-column prop="tid" label="ID" width="45px" />
                      <el-table-column prop="rstart" label="报修时间" />
                      <el-table-column prop="location" label="报修任务地址" width="200px" />
                      <el-table-column prop="tname" label="报修描述" width="150px" />
                      <el-table-column prop="rend" label="完成时间" />
                      <el-table-column prop="rstate" label="维修进度" width="100px">
                          <template #default="scope">
                              <el-tag v-if="scope.row.rstate === 1" type="success">已修缮</el-tag>
                              <el-tag v-else type="info">未处理</el-tag>
                          </template>
                      </el-table-column>
                      <el-table-column label="操作">
                          <template #default="scope">
                              <el-popconfirm title="你确定已经完成修缮嘛" confirm-button-text="确认" cancel-button-text="取消"
                                             @confirm="deleteBytid(scope.row.tid)">
                                  <template #reference>
                                      <el-button size="small" type="success" plain>修缮</el-button>
                                  </template>
                              </el-popconfirm>
                              <el-button type="success" size="small" @click="showAddDialog">配件使用详情</el-button>
                          </template>
                      </el-table-column>
                  </el-table>
              </el-scrollbar>
          </el-card>
      </el-col>
  </el-row>
    <!--添加事件的对话框开始-->
    <el-dialog v-model="addDialogshow" title=" 上报配件" width="700px">
        <el-form :model="RepairTaskAdd">
            <el-form-item label="配件名称" label-width="20%">
                <el-select v-model="RepairTaskAdd.partId" placeholder="请选择配件">
                    <el-option
                        v-for="part in parts"
                        :key="part.partId"
                        :label="part.partName"
                        :value="part.partId"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="使用位置" label-width="20%">
                <el-input v-model="RepairTaskAdd.usageDept" autocomplete="off" />
            </el-form-item>
            <el-form-item label="详情使用情况" label-width="20%">
                <el-input v-model="RepairTaskAdd.usageProject" autocomplete="off" />
            </el-form-item>
            <el-form-item label="使用数量" label-width="20%">
                <el-input v-model="RepairTaskAdd.outQty" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialogshow = false">取消</el-button>
                <el-button type="primary" @click="insert">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { onMounted, reactive, ref, nextTick } from 'vue';
import repairerApi from '@/api/repairerApi';
const rid = ref();
const parts = ref([]);
import RepairTaskApi from '@/api/RepairTaskApi';
import {ElMessage} from "element-plus";
//保存维修任务信息的数组
const tasklist = ref([])
// 所有员工的信息 key label
const allEmployee = ref([]);
// 被选中的员工的rid
const selectedRids = ref([]);
// 添加对话框是否显示状态
const addDialogshow = ref(false);
// 加载状态
const isLoading = ref(false);
// 被添加事件的信息
const RepairTaskAdd = ref({
    partId: '',
    outQty: '',
    usageDept: '',
    usageProject: '' // 初始化为数字0（未处理）
});
// 显示添加对话框
function showAddDialog() {
    // 重置表单数据
    RepairTaskAdd.value = {
        partId: '',
        outQty: '',
        usageDept: '',
        usageProject: '' // 初始化为数字0（未处理）
    };
    addDialogshow.value = true;
    getParts(); // 在打开对话框时获取配件信息

}
// 定义方法完成事件添加
function insert() {
    isLoading.value = true;
    RepairTaskApi.insert1(RepairTaskAdd.value)
        .then(resp => {
            isLoading.value = false;
            if (resp.code === 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                addDialogshow.value = false;
                selectAll();
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        })
        .catch(error => {
            isLoading.value = false;
            ElMessage({
                message: '添加失败: ' + error.message,
                type: 'error',
                duration: 2000
            });
        });
}
//定义方法获取id
function getid() {
  repairerApi.selectInfoByRid()
    .then(resp => {
      rid.value = resp.data.rid;
      selectAll();
    });

}
function getParts() {
    repairerApi.getAllParts()
        .then(resp => {
            console.log('配件数据原始响应:', resp);
            // 检查数据是否是数组
            if (Array.isArray(resp)) {
                parts.value = resp;
            } else if (resp && typeof resp === 'object' && 'data' in resp && Array.isArray(resp.data)) {
                parts.value = resp.data;
            } else {
                console.error('获取的配件数据格式错误，既不是数组也不是包含数组的对象');
                // 可以尝试打印更详细信息辅助排查
                console.log('原始响应:', resp);
            }
        })
        .catch(error => {
            console.error('获取配件信息失败', error);
        });
}
// 删除事件（标记为已修缮）
function deleteBytid(tid) {
    isLoading.value = true;
    RepairTaskApi.delete(tid)
        .then(resp => {
            isLoading.value = false;
            if (resp.code === 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                selectAll();
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        })
        .catch(error => {
            isLoading.value = false;
            ElMessage({
                message: '操作失败: ' + error.message,
                type: 'error',
                duration: 2000
            });
        });
}
getid();

//定义方法获取所有任务信息
function selectAll() {
  repairerApi.selectTaskByRid(rid.value)
    .then(resp => {
      tasklist.value = resp.data;
    });
}
</script>
<style scoped></style>